<template>
    <el-dialog
            :title="editType == 'edit' ? '修改字典表' : '新增字典表'"
            :close-on-click-Model="false"
            :visible.sync="showEditModel"
            @close="cancel"
            width="500px"
    >
        <div class="wrap" v-loading="loading" :element-loading-text="loadingText">
            <el-form
                    ref="dictFormRef"
                    :model="dictForm"
                    :rules="dictFormRules"
                    label-width="100px"
            >
                <el-form-item label="字典标签:" prop="label">
                    <el-input v-model="dictForm.label" size="small" placeholder="请填写标签名称!" clearable />
                </el-form-item>
                <el-form-item label="字典值:" prop="value">
                    <el-input v-model="dictForm.value" size="small" placeholder="请填写值!" clearable />
                </el-form-item>
                <el-form-item label="字典类型:" prop="type">
                    <el-input v-model="dictForm.type" size="small" placeholder="请填写类型!" clearable />
                </el-form-item>
                <el-form-item label="角色状态:" prop="status">
                    <el-radio-group v-model="dictForm.status" size="small">
                        <el-radio label="0">正常</el-radio>
                        <el-radio label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注:" prop="remarks">
                    <el-input
                            v-model="dictForm.remarks"
                            :maxlength="20"
                            style="width: 100%;"
                            placeholder="请输入备注!"
                            type="textarea"
                            resize="none"
                            clearable
                            :autosize="{minRows:4,maxRows:4}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权重:" prop="level">
                    <el-input-number v-model="dictForm.level" size="small" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="footer_dialog">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="onSaveDict">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { _editDict, _saveDict } from '_api'

    export default {
        props: {
            ModelData: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data () {
            return {
                showEditModel: false,
                loading: false,
                loadingText: '加载中',
                dictForm: {
                    dictId: '',
                    label: '',
                    value: '',
                    type: '',
                    status: '0',
                    remarks: '',
                    level: 1
                },
                dictFormRules: {
                    label: [{ required: true, message: '请输入字典标签' }],
                    value: [{ required: true, message: '请输入字典值' }],
                    type: [{ required: true, message: '请输入字典类型' }],
                    status: [{ required: true, }],
                    remarks: [{ required: true, message: '请输入字典类型' }],
                },
                editType: 'add'
            }
        },

        watch: {
            showEditModel: {
                handler(val) {
                    if (val) this.getRowData()
                },
                immediate: true
            }
        },

        methods: {
            // 获取编辑数据
            getRowData() {
                if (this.ModelData && this.ModelData.dictId) {
                    this.editType = 'edit'
                    this.dictForm = Object.assign(this.dictForm, {
                        dictId: this.ModelData.dictId,
                        label: this.ModelData.label,
                        level: this.ModelData.level,
                        remarks: this.ModelData.remarks,
                        status: this.ModelData.status,
                        type: this.ModelData.type,
                        value: this.ModelData.value
                    })
                } else {
                    this.editType = 'add'
                    this.dictForm = Object.assign(this.dictForm, {
                        dictId: '',
                        label: '',
                        level: 1,
                        remarks: '',
                        status: '0',
                        type: '',
                        value: ''
                    })
                }
            },
            cancel() {
                this.loading = false
                this.showEditModel = false
            },
            onSaveDict () {
                this.$refs.dictFormRef.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.loadingText = '数据提交中...'
                        let res
                        if (this.editType == 'edit') {
                            res = (await _editDict(this.dictForm))
                        } else {
                            res = (await _saveDict(this.dictForm))
                        }
                        if (res && res.code == 0) {
                            this.$emit('refresh')
                            this.$message.success(res.msg)
                            this.cancel()
                        } else {
                            this.loading = false
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>

</style>
